<template>
    <div class="info-collect">
        <Crumb name="Sparepart Inventory"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="根据配件编号查询"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-input
                        v-model="key1"
                        size="small"
                        class="input"
                        placeholder="根据配件名称查询"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-select v-model="belongModules" placeholder="Please Select Location" size="small">
                    <el-option
                            v-if="urlAvailible('shanqi/mor')"
                            label="Warehouse2"
                            value="1">
                    </el-option>
                    <el-option
                            v-if="urlAvailible('shanqi/weda')"
                            label="Weda"
                            value="2"
                    ></el-option>
                    <el-option
                            v-if="urlAvailible('shanqi/all')"
                            label="All"
                            value=""
                    ></el-option>
                </el-select>
                <el-button
                        size="small"
                        type="primary"
                        @click="search"
                > 搜索
                </el-button>
                <a :href="url" target="_blank" class="link-btn" v-if="urlAvailible('download-excel')">下载在库Excel</a>
                <a :href="deliveryUrl" target="_blank" class="link-btn"
                   v-if="urlAvailible('download-excel')">下载在途Excel</a>

            </Search>
            <div class="table-wrapper">
                <el-button type="text" style="margin-bottom: 2px;float: right;margin-top: 10px;" size="small"
                           @click="showSys = !showSys">{{showSys
                    ? "隐藏":"查看"}}系统／主机
                </el-button>
                <div class="sum">
                    <h3 class="title" @mouseenter="showTips = true" @mouseleave="showTips = false">汇总</h3>
                    <ul style="z-index: 10000" v-if="showTips">
                        <li>实时项目总数:{{total}}</li>
                        <li>实时总件数:{{totalStock}}</li>
                        <li>历史总入库数:{{stockInQty}}</li>
                        <li>历史总出库数:{{stockOutQty}}</li>
                        <li>在库金额:{{sumStockPrice}}</li>
                        <li>在途金额:{{sumSendPrice}}</li>
                        <li>备货金额:{{sumReadyPrice}}</li>
                        <li>出库金额:{{sumStockOutPrice}}</li>
                        <li>入库金额:{{sumStockInPrice}}</li>
                    </ul>
                </div>
                <el-table
                        :data="partList"
                        @filter-change="filterChange"
                        border
                        row-key="id"
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand" label="total" width="80">
                        <template slot-scope="part">
                            <div>
                                <part-detail :partDetail="part.row"></part-detail>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="partsNumber"
                            label="配件编号"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="denomination"
                            label="名称"
                            width="250px"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.denomination}}/{{scope.row.designation}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            column-key="systemName"
                            filter-multiple="false"
                            v-if="showSys"
                            prop="systemName"
                            :filters="uniSystem"
                            label="系统"
                    >
                    </el-table-column>
                    <el-table-column
                            column-key="hostNumber"
                            :filter-multiple="false"
                            v-if="showSys"
                            prop="hostNumber"
                            :filters="uniUnit"
                            label="适配主机"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="calculationStock"
                            label="库存"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.warning" style="color: #c60023;font-weight: 800">
                                {{scope.row.calculationStock}}
                            </div>
                            <div v-else>{{scope.row.calculationStock}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="sumReady"
                            label="备货数量/发运数量"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.sumReady}}/{{scope.row.sumSend}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            :filter-multiple="false"
                            column-key="warning"
                            :filters="[
                                {text:'不紧张',value:'不紧张'},
                                {text:'初级紧张',value:'初级紧张'},
                                {text:'中级紧张',value:'中级紧张'},
                                {text:'高级紧张',value:'高级紧张'},
                                {text:'最紧张',value:'最紧张'},
                                {text:'无状态',value:'无状态'},
                            ]"
                            prop="warnLevel"
                            label="安全库存"

                    >
                        <template slot-scope="scope">
                            {{scope.row.safeStock}}
                            <div>{{scope.row.warning}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="总进/总出/%"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.totalStockInQuantity}} /{{scope.row.totalStockOutQuantity}} /{{scope.row.percentage}}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="在途"
                    >
                        <template slot-scope="part">
                            <div v-if="part.row.sumReady || part.row.sumSend">
                                <el-button type="text"
                                           icon="el-icon-document"
                                           size="mini"
                                           @click="showDetail(part.row)">在途详情
                                </el-button>
                            </div>
                            <el-button type="text"
                                       style="margin-left: 0;"
                                       size="mini"
                                       icon="el-icon-document"
                                       @click="recordChange(part.row)">
                                    库存变动记录
                            </el-button>
                            <div>
                                <el-button type="text"
                                           size="mini"
                                           @click="openChart(part.row)">
                                    {{$t('chart')}}
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="recordVisible"
                width="80%"
        >
            <div>
                <el-tabs v-model="activeName">
                    <el-tab-pane :label="$t('menu.stockIn')" name="stockIn">
                        <div>
                            <h4>入库记录</h4>
                            <el-table
                                    :data="stockInDetail"
                                    border
                                    stripe
                                    show-summary
                                    style="width: 100%">
                                <el-table-column
                                        prop="stockInNum"
                                        label="入库单号"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="stockInDate"
                                        label="入库日期"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="shipInformation"
                                        label="船"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="partsQuantity"
                                        label="数量">
                                </el-table-column>
                                <el-table-column
                                        prop="warehouseDesc"
                                        label="仓库">
                                </el-table-column>
                                <el-table-column
                                        prop="stockInDesc"
                                        label="入库类型">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('menu.stockOut')" name="stockOut">
                        <div>
                            <h4>出库记录</h4>
                            <el-table
                                    :data="stockOutDetail"
                                    border
                                    show-summary
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="stockOutNum"
                                        label="出库单号"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="stockOutDate"
                                        label="出库日期"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="partsQuantity"
                                        label="数量">
                                </el-table-column>
                                <el-table-column
                                        prop="warehouseDesc"
                                        label="仓库">
                                </el-table-column>
                                <el-table-column
                                        prop="customer"
                                        label="客户">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="recordVisible = false">Close</el-button>
                <el-button type="primary" size="small"
                           @click="getInvoice">
                   {{$t('download')}}
               </el-button>
          </span>
        </el-dialog>
        <el-dialog
                :title="partSelect.partsNumber+'/'+partSelect.denomination + ' on delivery'"
                :visible.sync="showDelivery"
                width="100%"
        >
            <el-table
                    :data="deliveryList"
                    show-summary
                    border
                    stripe
                    style="width: 100%">
                <el-table-column
                        type="expand"
                >
                    <template slot-scope="scope">
                        <el-table
                                :data="scope.row.comparePackAndStockInQuantityDTOList"
                                style="width: 100%">
                            <el-table-column
                                    prop="batch"
                                    label="batch"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="packingQuantity"
                                    label="packingQuantity"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="sendContractNumber"
                                    label="sendContractNumber">
                            </el-table-column>
                            <el-table-column
                                    prop="shipInformation"
                                    label="shipInformation">
                            </el-table-column>
                            <el-table-column
                                    prop="stockInQuantity"
                                    label="stockInQuantity">
                            </el-table-column>
                            <el-table-column
                                    prop="remarks"
                                    label="remarks">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column
                        label="备货状态"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row.consignmentOrder}}</span>
                    </template>
                </el-table-column>

                <el-table-column

                        label="合同数量"
                >
                    <template slot-scope="scope">
                        <!--<span>{{scope.row.readyQuantity+scope.row.sendsQuantity}}</span>-->
                        <span>{{scope.row.consignmentOrderNumber}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="consignmentOrderDate"
                        label="合同日期"
                >
                </el-table-column>
                <el-table-column
                        prop="readyQuantity"
                        label="备货数量"
                >
                </el-table-column>
                <el-table-column
                        label="发运状态"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row.shipInformation}}{{scope.row.sendGoodsOrder}}{{scope.row.packingOrderNumber}}{{scope.row.status === 1 ? scope.row.leaveDate : scope.row.arrivalDate}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="sendsQuantity"
                        label="发运数量"
                >
                </el-table-column>
                <el-table-column
                        label="备注"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row.remarks}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="showDelivery = false">Close</el-button>
                  </span>
        </el-dialog>
        <el-dialog
                :title="$t('chart')"
                :visible.sync="chartVisible"
                width="80%"
        >
            <el-button type="primary" @click="originVisible = true">原始数据</el-button>
            <div class="echarts-content" style="width: 100%;">
                <bar-chart :options="options2"
                           style="margin-top: 10px;
                                width: 100%;
                                 display: block;
                                 vertical-align: top;
                                 text-align: left"></bar-chart>

            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="chartVisible = false">{{$t('cancel')}}</el-button>
          </span>
        </el-dialog>
        <el-dialog
                :visible.sync="originVisible"
                width="80%"
                >
            <el-table
                    row-key="time"
                    expand-row-keys="time"
                    @expand-change="expandChange"
                    :data="originData">
                <el-table-column
                       type="expand"
                >
                    <template slot-scope="scope">
                        <el-table
                                :data="scope.row.data"
                                style="width: 50%">
                            <el-table-column
                                    prop="customer"
                                    label="Customer"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="partsQuantity"
                                    label="Qty"
                                    width="180">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column
                        label="Month"
                >
                    <template slot-scope="scope">
                        {{scope.row.time}}
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
            <el-button @click="originVisible = false">{{$t('cancel')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {getUniSystem, getUniUnit} from "../../api";
    import {getInventory, getStorageRecord} from "../../api/contract";
    import {partDeliveryStatus} from "../../api";
    import authMixins from '../../util/authMixins'
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import partDetail from '../../components/part/partDetail'
    import {baseURL} from "../../util";
    import {getPartStockOutOrderByCustomer, stockOutChart} from "../../api/shanxi";
    import barChart from '../../components/shanxi/barChart'


    export default {
        name: "part-list",
        mixins: [mixins, authMixins],
        data() {
            return {
                x: [],
                y: [],
                y1: [],
                y2: [],
                originData:[],
                originVisible:false,
                activeName:'stockIn',
                chartVisible: false,
                showTips: false,
                belongModules: '1',  //所属模块
                stockInDetail: [],
                stockOutDetail: [],
                imageList: [],
                uniSystem: [],
                uniUnit: [],
                partList: [],
                filterOption: [],
                partStockInList: [],
                partStockOutList: [],
                part: [],
                ruleForm: {},
                rules: {},
                key: '',
                key1: '',
                dialogVisible: false,
                stockInShow: false,
                recordVisible: false,
                showSys: false,
                stockInQty: 0,
                stockOutQty: 0,
                totalStock: 0,
                deliveryList: [],
                showDelivery: false,
                partSelect: {},
                sumReadyPrice: 0,
                sumSendPrice: 0,
                sumStockPrice: 0,
                sumStockInPrice: 0,
                sumStockOutPrice: 0,
                stock: {
                    partId: '',
                    quantity: ''
                }
            }
        },
        created() {
            this.getInventory();
            this.getUniSystem();
            this.getUniUnit();
        },
        mounted() {
            this.$nextTick(() => {
                import('../../util/pdf.js').then(model => {
                    this.pdf = model.default;
                })
            })
        },
        computed: {
            url() {
                return baseURL + `/statistical_report/export_excel_in_stock_shan_qi.file?belongModule=${this.belongModules}`
            },
            deliveryUrl() {
                return baseURL + '/import_and_export/manage/export_excel_for_send_and_ready.file?belongModule=' + this.belongModules
            },
            title() {
                return this.partSelect.partsNumber + '/' + this.partSelect.denomination + "出入库记录"
            },
            btn() {
                return this.stockInShow ? '出库记录' : '入库记录'
            },
            options2() {
                return {
                    color:['#c60023','#409eff','#abcdef'],
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                title: 'Save As Image'
                            },
                            dataView: {
                                show: true,
                                title: 'Data View'
                            },
                        },
                    },
                    title: {
                        text: this.partSelect.partsNumber + '/' + this.partSelect.denomination + '配件出入库统计'
                    },
                    legend: {
                        data: ['出库', '入库','在库']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.x
                    },
                    yAxis: {
                        type: 'value',
                        min: 0
                    },
                    label: {
                        show: true,
                        // formatter: "{a}"
                    },
                    series: [{
                        name: '出库',
                        data: this.y,
                        smooth: true,
                        type: 'line',

                    }, {
                        name: '入库',
                        data: this.y1,
                        smooth: true,
                        type: 'line'
                    }, {
                        name: '在库',
                        data: this.y2,
                        type: 'bar'
                    }
                    ]
                }
            }
        },
        filters: {
            money(num) {
                return num && num.toString()
                    .replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
            }
        },
        methods: {
            async expandChange(row) {
                if (row.data) return
                const {status,data} = await  getPartStockOutOrderByCustomer({
                    partsId:this.partSelect.partsId,
                    year: row.time.substr(0,4),
                    month:row.time.substr(4,2),
                    warehouse:1
                });
                if (status === ERROR_OK) {
                    this.$set(row,'data',data)
                }

            },
            async openChart(row) {
                this.partSelect = row;
                const {status, data, msg} = await stockOutChart({partsId: row.partsId, warehouse: 1, belongModule: 1});
                if (status === ERROR_OK) {
                    this.x = Object.keys(data); // 横坐标 代表了日期
                    this.originData = this.x.map(item => {
                        return {
                            time:item
                        }
                    })
                    this.y = this.x.map(item => data[item] ? data[item].outQuantity : '0')
                    this.y1 = this.x.map(item => data[item] ? data[item].inQuantity : '0')
                    this.y2 = this.x.map(item => data[item] ? data[item].inventory : '0')
                    this.chartVisible = true
                    this.$forceUpdate()
                } else {
                    this.$message.error(msg)
                }
            },
            getInvoice() {
                let body1 = [
                    [
                        {text: this.$t('stockOut.stockOutNo'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {
                            text: this.$t('stockOut.stockOutDate'),
                            style: 'tableHeader',
                            alignment: 'center',
                            width: '20%'
                        },
                        {text: this.$t('part.qty'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {text: this.$t('warehouse'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {text: this.$t('stockOut.customer'), style: 'tableHeader', alignment: 'center', width: '20%'},
                    ],
                ];
                const mainBody1 = this.stockOutDetail.map((item) => {
                    return [
                        {text: item.stockOutNum, style: 'text'},
                        {text: item.stockOutDate, style: 'text'},
                        {text: item.partsQuantity, style: 'text'},
                        {text: item.warehouseDesc, style: 'text'},
                        {text: item.customer, style: 'text'},
                    ]
                });
                let total = 0;
                this.stockInDetail.forEach(item => {
                    total += item.partsQuantity
                });
                let total1 = 0;
                this.stockOutDetail.forEach(item => {
                    total1 += item.partsQuantity
                })
                body1 = body1.concat(mainBody1).concat([[{}, {}, {text: total1, style: 'text'}, {}, {}]]);
                let body = [
                    [
                        {text: this.$t('stockIn.stockInNo'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {text: this.$t('stockIn.stockInDate'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {text: this.$t('stockIn.shipNumber'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {text: this.$t('part.qty'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {text: this.$t('warehouse'), style: 'tableHeader', alignment: 'center', width: '10%'},
                        {text: this.$t('stockIn.stockInType'), style: 'tableHeader', alignment: 'center', width: '10%'},
                    ],
                ];
                const mainBody = this.stockInDetail.map((item) => {
                    return [
                        {text: item.stockInNum, style: 'text'},
                        {text: item.stockInDate, style: 'text'},
                        {text: item.shipInformation, style: 'text'},
                        {text: item.partsQuantity, style: 'text'},
                        {text: item.warehouseDesc, style: 'text'},
                        {text: item.stockInDesc, style: 'text'},
                    ]
                });
                body = (body.concat(mainBody));
                body = body.concat([[{}, {}, {}, {text: total, style: 'text'}, {}, {}]]);
                let doc = {
                    filename: 'QO',
                    pageSize: 'LEGAL',
                    pageMargins: [10, 100, 10, 60],
                    header: [
                        {
                            margin: [20, 20, 20, 20],
                            columns: [
                                {
                                    width: '70%',
                                    text: [
                                        {
                                            text: 'PT INDONESIA EQUIPMENT LINE\n',
                                            style: 'header'
                                        },
                                        {
                                            text: "Leading in Service Innovation\n",
                                            style: 'subTitle'
                                        },
                                        this.partSelect.partsNumber + '/' + this.partSelect.denomination
                                    ],

                                },
                                {
                                    width: '*',
                                    text: 'Stock Record',
                                    style: 'title',
                                    alignment: 'right'
                                }
                            ],
                        }
                    ],
                    content: [
                        {
                            text: {text: '入库记录/Stock In Record', width: '100%'}
                        },
                        {
                            layout: 'lightHorizontalLines',
                            width: '100%',
                            alignment: 'center',
                            table: {
                                widths: ['25%', '10%', '20%', '15%', '15%', '15%'],
                                headerRows: 2,
                                body: body
                            }
                        },
                        {
                            text: '出库记录/Stock Out Detail'
                        },
                        {
                            layout: 'lightHorizontalLines',
                            width: '100%',
                            alignment: 'center',
                            table: {
                                widths: ['*', '*', '*', '*', '*'],
                                headerRows: 2,
                                body: body1
                            }
                        }
                    ],
                    footer: [
                        {
                            text: 'If you have any questions or concerns, please contact 0800-1581212',
                            width: '100%',
                            alignment: 'center'
                        },
                        {text: 'THANK YOU FOR YOUR BUSINESS! ', width: '100%', alignment: 'center'}
                    ],

                    defaultStyle: {
                        font: 'msyh'
                    },

                    styles: {
                        tableHeader: {
                            fontSize: 10
                        },
                        text: {
                            fontSize: 10
                        },
                        header: {
                            fontSize: 10,
                            bold: true
                        },
                        title: {
                            fontWeight: 'light',
                            fontSize: 25,
                            bold: false
                        },
                        subTitle: {
                            fontSize: 12,
                            bold: true,
                            italic: true
                        }
                    }

                }
                this.pdf.open(doc);
            },
            getWarnLevel(row) {
                const levelList = ['不紧张', '初级紧张', '中级紧张', '高级紧张'];
                if (row.calculationStock > row.safeStock) { //有安全库存
                    return levelList[0]
                }

                if ((0 < row.calculationStock) && (row.calculationStock < row.safeStock)) { //有库存但小于安全库存
                    if (row.sumReady > 0 && row.sumSend > 0) {
                        return levelList[0]
                    }
                    if ((row.sumReady > 0) || (row.sumSend > 0)) {
                        return levelList[1]
                    }
                    if (row.sumReady === 0 && row.sumSend === 0) {
                        return levelList[2]
                    }
                }
                if (row.calculationStock <= 0) {
                    if ((row.sumReady > 0) && (row.sumSend > 0)) {
                        return levelList[1]
                    }
                    if ((row.sumReady > 0) || (row.sumSend > 0)) {
                        return levelList[2]
                    }
                    if (row.sumReady === 0 && row.sumSend === 0) {
                        return levelList[3]
                    }
                }
            },
            showDetail(part) {
                this.getDeliveryDetail(part.partsId);
                this.partSelect = part;
                this.showDelivery = true
            },
            async getDeliveryDetail(partsId) {
                const {status, data} = await partDeliveryStatus(partsId, this.belongModules);
                if (status === ERROR_OK) {
                    this.deliveryList = data
                }
            },
            async recordChange(row) {
                this.partSelect = row;
                this.recordVisible = true
                const {status, data} = await getStorageRecord(row.partsId, this.belongModules);

                if (status === ERROR_OK) {
                    this.stockInDetail = data.stockInDetail;
                    this.stockOutDetail = data.stockOutDetail;
                    this.recordVisible = true
                }
            },
            search() {
                this.pageNum = 1;
                this.getInventory()
            },
            changePage(page) {
                this.pageNum = page;
                this.getInventory();
            },
            async getInventory() {
                const {status, data, msg} = await getInventory({
                    pageSize: 100,
                    pageNum: this.pageNum,
                    hostname: this.hostname,
                    systemName: this.systemName,
                    warning: this.warning,
                    warehouse: 1,
                    partsNumber: this.key,
                    description: this.key1,
                    belongModule: this.belongModules
                });
                if (status === ERROR_OK) {
                    this.partList = data.list;
                    this.partList.forEach(item => {
                        item.warnLevel = this.getWarnLevel(item);
                    })
                    this.total = data.total;
                    this.stockInQty = data.sum_stock_in_quantity;
                    this.stockOutQty = data.sum_stock_out_quantity;
                    this.totalStock = data.sum_quantity;
                    this.sumReadyPrice = data.sum_ready_price;
                    this.sumSendPrice = data.sum_send_price;
                    this.sumStockPrice = data.sum_stock_price;
                    this.sumStockInPrice = data.sum_stock_in_price;
                    this.sumStockOutPrice = data.sum_stock_out_price;
                } else {
                    this.partList = [];
                    this.$notify.error(msg)
                }
            },

            filterChange(row) {
                Object.keys(row).forEach(item => {
                    this[item] = row[item][0]
                })
                this.getInventory()
            },
            async getUniUnit() {
                const {status, data} = await getUniUnit();
                if (status === ERROR_OK) {

                    this.uniUnit = data.map(item => {
                        return {
                            text: item,
                            value: item
                        }
                    });
                }
            },
            async getUniSystem() {
                const {status, data} = await getUniSystem();
                if (status === ERROR_OK) {
                    this.uniSystem = data.map(item => {
                        return {
                            text: item,
                            value: item
                        }
                    });
                }
            }
        },
        components: {
            Crumb, Search, partDetail, barChart
        }
        // :filter-method="handleFilterChange"
        // :filters="[
        // {text:'不紧张',value:'不紧张'},
        // {text:'初级紧张',value:'初级紧张'},
        // {text:'中级紧张',value:'中级紧张'},
        // {text:'高级紧张',value:'高级紧张'}
        // ]"
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .info-collect {
        background: #f6;
        label {
            display: inline-block;
            line-height: 30px;
            padding: 0 20px;
            border-radius: 3px;
            cursor: pointer;
            background: #409eff;
            height: 30px;
            color: white;
            text-align: center;
            font-size: 14px;
            margin-left: 20px;
            &:hover {
                background: #6495ed;
            }
        }
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
        .sum {
            position: absolute;
            font-size: 12px;
            right: 0px;
            top: 150px;
            padding: 0 50px;
            text-align: left;
            z-index: 99;
            .title {
                text-align: right;
                cursor: pointer;
                margin: 0;
            }
            ul {
                border: 1px solid #dddddd;
                width: 500px;
                height: 100px;
                box-shadow: 2px 2px 2px #ddd;
                background: white;
                li {
                    width: 50%;
                    box-sizing: border-box;
                    padding-left: 10px;
                    flex: 1;
                    display: inline-block;
                    vertical-align: top;
                }
            }
        }
        .link-btn {
            @include linkBtn
        }
    }
</style>